<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Vacation Rentals</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/bootstrap-theme.css" />
		<link rel="stylesheet" href="css/style.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="css/jquery-ui.css">
		<script src="js/jquery-1.10.2.js"></script>
		<script src="js/jquery-ui.js"></script>
		<script src="js/custom.js"></script>

		<script src="js/bootstrap-datepicker.js"></script>
		<script src="js/bootstrap.js"></script>
	</head>

	<body class="background-room">
		<div class="navbar navbar-default reset-navbar" role="navigation">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span><span
					class="icon-bar"></span><span class="icon-bar"></span><span
					class="icon-bar"></span>
				</button>
				<a class="navbar-brand reset-navbar-brand" href="#"><img src="images/logo.png" /></a>

			</div>
			<div class="collapse navbar-collapse">

				<ul class="nav navbar-nav">
					<li id="header-search">
						<i class="glyphicon glyphicon-search icon"></i>
						<input
						type="text" class="form-control" placeholder="Where are you going?"
						autocomplete="off">
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle"
						data-toggle="dropdown"> BROWSE <b class="caret"></b> </a>
						<ul class="dropdown-menu">
							<li>
								<a href="#"><i class="glyphicon glyphicon-heart"></i> Popular</a>
							</li>
							<li>
								<a href="#"><i class="glyphicon glyphicon-user"></i>Friend</a>
							</li>
							<li>
								<a href="#"><i class="glyphicon glyphicon-tint"></i>Neighborhoods</a>
							</li>
						</ul>
					</li>
				</ul>

				<ul class="nav navbar-nav navbar-right">
					<li>
						<a href="#">SIGN UP</a>
					</li>
					<li>
						<a href="#">LOG IN</a>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle"
						data-toggle="dropdown"> HELP <b class="caret"></b> </a>
						<ul class="dropdown-menu">
							<li>
								<a href="#">Visit the Help Center</a>
							</li>
							<li>
								<a href="#">Getting Started Guide</a>
							</li>
							<li>
								<a href="#">How do I create an account</a>
							</li>
						</ul>
					</li>
					<li>
						<button type="button" class="btn btn-default btn-sm list-your-space">
							LIST YOUR SPACE
						</button>
					</li>
				</ul>

			</div>
		</div>

		<!-- CONTENT ROOMS-->
		<div id="content-rooms">
			<div id="row-rooms-1" class="row reset-margin">
				<h1 class="text-center">List Your Space</h1>
				<h5 class="text-center">Airbnb lets you make money renting out your place.</h5>
			</div>
			<div id="row-rooms-2" class="row reset-margin">
				<div class="row reset-margin">
					<div class="col-md-2 col-xs-2 col-sm-2"><label class="label-rooms pull-right">Home Type</label></div>
					<div class="col-md-10 col-xs-10 col-sm-10 btn-group">
						<button class="btn btn-lagre "><span class="glyphicon glyphicon-th " style="float:left;"></span>Apartment</button>
						<button class="btn btn-lagre "><span class="glyphicon glyphicon-home " style="float:left;"></span>House</button>
						<button class="btn btn-lagre "><span class="glyphicon glyphicon-leaf" style="float:left;"></span>Bed &amp; Breakfast</button>
						<select class="btn-lagre">
						  <option value="volvo">Volvo</option>
						  <option value="saab">Saab</option>
						  <option value="opel">Opel</option>
						  <option value="audi">Audi</option>
						</select>
  
					</div>
				
				</div>
				<br>
				<div class="row reset-margin">
					<div class="col-md-2 col-xs-2 col-sm-2"><label class="label-rooms pull-right">Room Type</label></div>
					<div class="col-md-10 col-xs-10 col-sm-10 btn-group">
						<button class="btn btn-lagre "><span class="glyphicon glyphicon-home " style="float:left;"></span>Entire home/apt</button>
						<button class="btn btn-lagre "><span class="glyphicon glyphicon-book" style="float:left;"></span>Private room</button>
						<button class="btn btn-lagre "><span class="glyphicon glyphicon-share " style="float:left;"></span>Shared room</button>
					</div>
				</div>
				<br>
				<div class="row reset-margin">
					<div class="col-md-2 col-xs-2 col-sm-2"><label class="label-rooms pull-right">Accommodates</label></div>
					<div class="col-md-10 col-xs-10 col-sm-10 btn-group">
						
						<select class="btn-lagre">
							
						  <option value="volvo">1</option>
						  <option value="saab">2</option>
						  <option value="opel">3</option>
						  <option value="audi">4</option>
						</select>
						
					</div>
				</div>
				<br>
				<div class="row reset-margin">
					<div class="col-md-2 col-xs-2 col-sm-2"><label class="label-rooms pull-right">City</label></div>
						<div class="col-md-10 col-xs-10 col-sm-10">
							<div class="col-md-6 " id="city_room">
								<span class="glyphicon glyphicon-map-marker " style="float:left; padding-top: 25px;"></span>
								<input type="text" id="city_location" placeholder="San Francisco, Rome, Shibuya..."/>
							</div>
						</div>
				</div>
				<br>
				<div class="row reset-margin">
					<div class="col-md-2 col-xs-2 col-sm-2"></div>
					<div class="col-md-10 col-xs-10 col-sm-10"><button class="btn btn-lg" style="background:#CE8483; color: #FFFFFF;">Continue</button></div>
					
				</div>
			</div>
			<div id="row-rooms-3" class="row reset-margin">
				
					<div class="col-md-4">
						<img src="images/icon-handshake.PNG">
						
					</div>
					<div class="col-md-4">
						<img src="images/icon-handshake.PNG">
					</div>
					<div class="col-md-4">
						<img src="images/icon-handshake.PNG">
					</div>
				
			</div>
		</div>
		<!-- END CONTENT ROOMS-->
		
		<div id="footer">
			<div class="page-container">
				<div class="row">
					<div class="col-md-3">
						<div class="dropdown">
							<button class="btn btn-default dropdown-toggle dropdow-bottom" type="button" id="dropdownMenu1" data-toggle="dropdown">
								English
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
								<li role="presentation">
									<a role="menuitem" tabindex="-1" href="#">Suomi</a>
								</li>
								<li role="presentation">
									<a role="menuitem" tabindex="-1" href="#">Magyar</a>
								</li>
								<li role="presentation">
									<a role="menuitem" tabindex="-1" href="#">Polski</a>
								</li>
							</ul>
						</div>

						<div class="dropdown">
							<button class="btn btn-default dropdown-toggle dropdow-bottom" type="button" id="dropdownMenu1" data-toggle="dropdown">
								VND
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
								<li role="presentation">
									<a role="menuitem" tabindex="-1" href="#">USD</a>
								</li>
								<li role="presentation">
									<a role="menuitem" tabindex="-1" href="#">TKI</a>
								</li>
								<li role="presentation">
									<a role="menuitem" tabindex="-1" href="#">TRY</a>
								</li>

							</ul>
						</div>
					</div>
					<div class="col-md-3 col-xs-3 col-sm-3">
						<h5>Company</h5>

						<a href="#">About</a>
						<br>
						<a href="#">Jobs</a>
						<br>
						<a href="#">Press</a>
						<br>
						<a href="#">Blog</a>
						<br>
						<a href="#">Help</a>
						<br>
						<a href="#">Policies</a>
						<br>
						<a href="#">Disaster Response</a>
						<br>
						<a href="#">Terms &amp; Privacy</a>
						<br>
					</div>
					<div class="col-md-3 col-xs-3 col-sm-3">

						<h5>Discover</h5>

						<a href="#">Trust &amp; Safety</a>
						<br>
						<a href="#">Airbnb Picks</a>
						<br>
						<a href="#">Mobile</a>
						<br>
						<a href="#">Support NYC</a>
						<br>
						<a href="#">Site Map</a>

					</div>
					<div class="col-md-3 col-xs-3 col-sm-3">
						<h5>Hosting</h5>

						<a href="#">Why Host</a>
						<br>
						<a href="#">Hospitality</a>
						<br>
						<a href="#">Responsible Hosting</a>
						<br>
						<a href="#">Stories</a>
						<br>

					</div>
				</div>
			</div>
		</div>
	</body>
</html>